<style>
    
</style>
<template>
    <div>
        <header class="admin-container-header clearfix">
            <div class="header-group float-left">
                <h4 class="title">设置</h4> <h5 class="sub-title">多域名设置</h5>
            </div>
            <div class="float-right">
                <button type="button" class="pull-right ivu-btn ivu-btn-primary ivu-btn-circle m-l-lg" @click='itemAdd'>
                    <span>添加域名</span>
                </button>
            </div>
        </header>
        
        <main class="admin-container-body" style="height: calc(100% - 50px)">
        <section class="panel-box">
        <section class="panel-box-body">
            <!--内容列表-->
            <section class="diy-table-list" v-cloak>
                <div class="diy-table-item diy-table-item-header">
                    <ul class="list-unstyled row">
                        <li class="col-md-1"><span>ID</span></li>
                        <li class="col-md-2"><span>域名</span></li>
                        <li class="col-md-2"><span>操作</span></li>
                    </ul>
                </div>
                <div v-if='itemList.length' class="diy-table-body">
                    <div class="diy-table-item" v-for='item in itemList' >
                         <ul class="list-unstyled row">
                            <li class="col-md-1"><span>{{item.id}}</span></li>
                            <li class="col-md-2 over-h-e"><a :href="item.http_type + item.domain" target="_blank">{{item.http_type}}{{item.domain}}</a></li>
                            <li class="col-md-2">
                                <a @click='itemDel(item)' :disabled='item.disabled'>删除</a>
                                <a @click='itemEdit(item)' class="ml-1">修改</a>
                                <a @click='clicksite(item)' class="ml-1">设置</a>
                            </li>
                         
                        </ul>
                    </div>
                </div>
                <div class="no-block" v-else>
                    <Icon type="ios-filing-outline"></Icon>
                    <p>暂无数据</p>
                </div>
            </section>
            <!--内容列表结束-->
            <!--分页-->
            <div class="text-right clearfix mt-3">
                <Page :total="pagination.total"  @on-page-size-change='itemPaginationSelect' :page-size-opts='[10,100,500,1000,5000]' show-total show-sizer placement='top' @on-change='itemPaginationClick'></Page>
            </div>
        </section>
    </section>
     <Modal :title="dialogItemTitle" size="small" v-model='dialogItemStatus' v-cloak>
        <i-form>
            <Form-item label="域名">
                <i-input v-model="item.domain" placeholder='例如：www.baidu.com'>
                <i-select v-model="item.httpType" slot="prepend" style="width: 80px">
                    <i-option value="http://">http://</i-option>
                    <i-option value="https://">https://</i-option>
                </i-select>
                </i-input>
            </Form-item>
        </i-form>
        <div slot="footer" class="dialog-footer">
            <i-button @click="dialogItemStatus = false">取 消</i-button>
            <i-button type="primary" @click="itemPost()">确 定</i-button>
        </div>
    </Modal>
        <Modal size="small" v-model='settingModelStatus' v-cloak width='1000'>
            <Tabs :animated='false' style='height: 400px;'>
                <Tab-Pane label="基础设置" name="name1">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <i-form label-position="top">
                                <Form-item label="网站名称">
                                    <i-input v-model="setting.siteName"></i-input>
                                </Form-item>
                                <Form-item label="DIY首页全标题">
                                    <i-input v-model="setting.diyTitle"></i-input>
                                </Form-item>
                                <Form-item label="网站描述">
                                    <i-input type="textarea" v-model="setting.description"></i-input>
                                </Form-item>
                                <Form-item label="网站关键词">
                                    <i-input type="textarea" v-model="setting.keywords"></i-input>
                                </Form-item>
                            </i-form>
                        </div>
                        <div class="col-md-6">
                            <i-form label-position="top">
                                <Form-item label="网站副标题">
                                    <i-input v-model="setting.indexTitle" placeholder=" - 国内最大的互联网创业交流社区"></i-input>
                                </Form-item>
                                <Form-Item label="ICP备案号">
                                    <i-input v-model="setting.icp"></i-input>
                                </Form-Item>
                                <Form-Item label="流量统计代码">
                                    <i-input type="textarea" v-model="setting.statistical"></i-input>
                                </Form-Item>
                                <Form-item label="模板">
                                    <i-select v-model="setting.template" transfer>
                                        <i-option v-for='item in templateList' :value="item.fileName">{{item.fileName}}</i-option>
                                    </i-select>
                                </Form-item>
                            </i-form>
                        </div>
                    </div>
                </Tab-Pane>
                <Tab-Pane label="MIP推送" name="name2">
                    <i-form label-position="top">
                        <div class="row">
                            <div class="col-md-6">
                                <Form-item label="百度MIP接口">
                                    <i-input v-model="setting.baiduMipApi" placeholder="请到百度站长平台"></i-input>
                                </Form-item>
                            </div>
                            <div class="col-md-2">
                                 <Form-item label="自动推送">
                                    <i-switch v-model="setting.baiduMipApiStatus" false-value='' true-value='1'>
                                        <span slot="open">开</span>
                                        <span slot="close">关</span>
                                    </i-switch>
                                </Form-item>
                            </div>
                        </div>
                      
                    </i-form>
                </Tab-Pane>
                <Tab-Pane label="链接提交" name="name6">
                    <i-form label-position="top">
                        <div class="row">
                            <div class="col-md-6">
                                <Form-item label="百度链接接口">
                                    <i-input v-model="setting.baiduTimeApi" placeholder="请到百度站长平台"></i-input>
                                </Form-item>
                            </div>
                            <div class="col-md-2">
                               <Form-item label="自动推送">
                                    <i-switch v-model="setting.baiduTimeApiStatus" false-value='' true-value='1'>
                                        <span slot="open">开</span>
                                        <span slot="close">关</span>
                                    </i-switch>
                                </Form-item>
                            </div>
                        </div>
                    </i-form>
                </Tab-Pane>
                <Tab-Pane label="神马MIP" name="name8">
                    <i-form label-position="top">
                        <div class="row">
                            <div class="col-md-6">
                                <Form-item label="神马MIP接口">
                                    <i-input v-model="setting.smApi" placeholder="请到神马站长平台获取"></i-input>
                                </Form-item>
                            </div>
                            <div class="col-md-2">
                               <Form-item label="自动推送">
                                    <i-switch v-model="setting.smApiStatus" false-value='' true-value='1'>
                                        <span slot="open">开</span>
                                        <span slot="close">关</span>
                                    </i-switch>
                                </Form-item>
                            </div>
                        </div>
                    </i-form>
                </Tab-Pane>
                <Tab-Pane label="熊掌号" name="name9">
                    <i-form label-position="top">
                        <div class="row">
                            <div class="col-md-6">
                                <Form-item label="熊掌号ID">
                                    <i-input v-model="setting.xzhId" placeholder="请到百度站长平台获取 例如：1443003438950121"></i-input>
                                </Form-item>
                            </div>
                        </div>
                    </i-form>
                </Tab-Pane>
                <Tab-Pane label="熊掌号天级" name="name10">
                    <i-form label-position="top">
                        <div class="row">
                            <div class="col-md-6">
                                <Form-item label="熊掌号天级接口">
                                    <i-input v-model="setting.xzhRealtimeApi" placeholder="请到百度站长平台获取"></i-input>
                                </Form-item>
                            </div>
                            <div class="col-md-2">
                               <Form-item label="自动推送">
                                    <i-switch v-model="setting.xzhRealtimeApiStatus" false-value='' true-value='1'>
                                        <span slot="open">开</span>
                                        <span slot="close">关</span>
                                    </i-switch>
                                </Form-item>
                            </div>
                        </div>
                    </i-form>
                </Tab-Pane>
                <Tab-Pane label="熊掌号周级" name="name11">
                    <i-form label-position="top">
                        <div class="row">
                            <div class="col-md-6">
                                <Form-item label="熊掌号周级接口">
                                    <i-input v-model="setting.xzhBatchApi" placeholder="请到百度站长平台获取"></i-input>
                                </Form-item>
                            </div>
                            <div class="col-md-2">
                               <Form-item label="自动推送">
                                    <i-switch v-model="setting.xzhBatchApiStatus" false-value='' true-value='1'>
                                        <span slot="open">开</span>
                                        <span slot="close">关</span>
                                    </i-switch>
                                </Form-item>
                            </div>
                        </div>
                    </i-form>
                </Tab-Pane>
            </Tabs>
          
        <div slot="footer" class="dialog-footer">
            <i-button @click="settingModelStatus = false">取 消</i-button>
            <i-button type="primary" @click="settingUpdate()">确 定</i-button>
        </div>
    </Modal>
</main>

    </div>
</template>

<script>
    export default {
     data () {
       return {
            itemList: [], 
            templateList: [],
            item: {
                id: '',
                httpType: 'http://',
                domain: '',
            },
            setting: {},
            dialogItemTitle: '添加域名',
            dialogItemStatus: false,
            settingModelStatus: false,
            pagination: {
                currentPage: 1,
                limit: 10,
                total: this.total,
            },
       }
     },
    mounted() {
        this.getItemList();
        this.getTemplateList();
    },
    methods: {
        clicksite(item) {
            this.item.id = item.id;
            this.getSetting();
            this.settingModelStatus = true;
        },
        getSetting() {
            this.$ssy.ajax('{$domain}/setting/ApiAdminDomain/itemInfo', {
                id: this.item.id,
            }).then(res => {
                if(res.code == 1) {
                    this.setting = res.data.data ? res.data.data : {};
                }
            });
        },
        settingUpdate() {
            this.$ssy.ajax('{$domain}/setting/ApiAdminDomain/itemDataUpdate', {
                id: this.item.id,
                setting:this.setting,
            }).then(res => {
                if(res.code == 1) {
                    this.$Message.success('操作成功');
                    this.getItemList();
                    this.settingModelStatus = false;
                }
            });
        },
        itemAdd() {
            this.item.id = '';
            this.item.dialogItemTitle = '添加站点';
            this.item.domain = '';
            this.item.httpType = 'http://';
            this.dialogItemStatus = true;
        },
        itemEdit(item) {
            this.item.id = item.id;
            this.item.dialogItemTitle = '修改站点';
            this.item.domain = item.domain;
            this.item.httpType = item.http_type;
            this.dialogItemStatus = true;
        },
        itemPost() {
            if (this.item.id) {
                this.$ssy.ajax('{$domain}/setting/ApiAdminDomain/itemEdit', {
                    id: this.item.id,
                    httpType: this.item.httpType,
                    domain: this.item.domain,
                    setting: this.setting,
                }).then(res => {
                    if(res.code == 1) {
                        this.$Message.success('修改成功');
                        this.getItemList();
                        this.dialogItemStatus = false;
                    }
                });
            } else {
                this.$ssy.ajax('{$domain}/setting/ApiAdminDomain/itemAdd', {
                    httpType: this.item.httpType,
                    domain: this.item.domain,
                }).then(res => {
                    if(res.code == 1) {
                        this.$Message.success('修改成功');
                        this.getItemList();
                        this.dialogItemStatus = false;
                    }
                });
            }
        },
        itemDel(item) {
            this.$Modal.confirm({
                title: '消息提示',
                content: '<p>确定删除么？删除后不可恢复</p>',
                onOk: () => {
                    _this = this;
                    this.$ssy.ajax('{$domain}/setting/ApiAdminDomain/itemDel', {
                        id: item.id,
                    }).then(res => {
                        if(res.code == 1) {
                            this.$Message.success('删除成功');
                            this.getItemList();
                        }
                    });
                },
                onCancel: () => {
                }
            });
        },
        getItemList() {
            this.loading = true;
            this.$ssy.ajax('{$domain}/setting/ApiAdminDomain/itemList', {
                page: this.pagination.currentPage,
                limit: this.pagination.limit,
            }).then(res => {
                this.itemList = [];
                if(res.code == 1) {
                    var itemList = res.data.itemList;
                    this.itemList = itemList;
                    this.pagination.total = res.data.total;
                }
                this.loading = false;
            });
        },
        getTemplateList() {
            var templateListUrl  = '{$domain}/setting/ApiAdminTemplate/templateList';
            this.$ssy.ajax(templateListUrl, {
            }).then(res => {
                if(res.code == 1) {
                    var templateList = res.data;
                    this.templateList = templateList;
                }
            });
        },
        itemPaginationSelect(val) {
            this.pagination.limit = val;
            this.getItemList();
        },
        itemPaginationClick(val) {
            this.pagination.currentPage = val;
            this.getItemList();
        },
    }
}
</script>
